<template>
	<view class="page-box">
		<z-paging ref="paging" v-model="list" @query="getOrderList" empty-view-text="你还没有订单"
			empty-view-img="/static/image/order-empty.png" :empty-view-img-style="{width:'150rpx',height:'150rpx'}"
			:empty-view-title-style="{marginTop: '30rpx'}">
			<template #top>
				<fixed-tabs @change="swiperChange" fixed :scrollable="false" :list="tabList"
					v-model="current"></fixed-tabs>
			</template>
			<view class="list-box pad-30">
				<view class="list pad-30 bg-white radius30 mar-bottom-30" v-for="item in list" :key="item.id">
					<view class="address font-30 font-w-500">
						地址：{{item.service_order?.province}}{{item.service_order?.city}}{{item.service_order?.region}}{{item.service_order?.street}}{{item.service_order?.detail}}
					</view>
					<view @click="hanldeInfo(item)">
						<view class="font-24 color-646464">
							<view class="mar-top-30">定单号：{{item.order_no}}</view>
							<view class="mar-top-30">下单时间：{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM')}}
							</view>
							<template v-if="item.service_order_workers">
								<view v-for="w in item.service_order_workers" :key="w.id" class="mar-top-30">
									接单工人：{{w.name}}</view>
							</template>
						</view>
						<view class="betweenX mar-top-30 font-30 font-w-400">
							<view>订单金额</view>
							<view>￥{{item.amount}}</view>
						</view>
						<view class="betweenX mar-top-30 font-w-500">
							<view>实际支付</view>
							<view class="color-error">￥{{item.act_pay_amount}}</view>
						</view>
					</view>
					<up-line margin="30rpx 0 30rpx 0"></up-line>
					<view class="betweenX centerXY" v-if="item.pay_status == 1">
						<view class="font-26 centerY">
							<view>支付倒计时：</view>
							<up-count-down :auto-start="true" @finish="hanldeFinish(item)" v-if="item.end_pay_at"
								:time="hanldeTime(item.end_pay_at)" format="mm:ss">
							</up-count-down>
						</view>
						<view class="centerXY font-24">
							<!-- <view class="btn">取消订单</view> -->
							<view @click="hanldeOpenPay(item)" class="btn mar-left-20 button-style">确认支付</view>
						</view>
					</view>

					<view class="betweenX centerXY" v-else-if="item.pay_status == 3">
						<view class="font-26">
							<view>已支付</view>
						</view>
						<view class="centerXY font-24">
							<view @click="hanldeInfo(item)" class="btn">订单退款</view>
							<view @click="hanldeOrderTrends(item)" class="btn mar-left-20">订单动态</view>
							<!-- <view @click="hanldeEvaluate(item)" class="btn mar-left-20">评价订单</view> -->
							<view v-if="item?.tel" @click="hanldeOpenTel(item.service_order_workers)"
								class="btn mar-left-20 button-style">联系工人</view>
						</view>
					</view>

					<view class="betweenX centerXY" v-else-if="item.pay_status == 5">
						<view class="font-26">
							<view>已取消</view>
						</view>
						<view class="centerXY font-24">
							<!-- <view class="btn mar-left-20 button-style">再来一单</view> -->
						</view>
					</view>
					<view class="betweenX centerXY" v-else-if="item.pay_status == 6">
						<view class="font-26">
							<view>退款成功</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- 选择支付方式 -->
		<up-popup v-if="isPay" :show="isPay" round="20" bgColor="#f4f5f9" closeable @close="isPay =false">
			<view class="pad-30 font-36 color-text">选择支付方式</view>
			<pay-list @cancel="hanldePayCallback" :orderNos="orderNo"></pay-list>
		</up-popup>


		<!-- 评价弹窗 -->
		<up-popup :show="isEvaluate" mode="center" round="30" closeable>
			<view v-if="rateInfo.service_order_workers" class="centerXY columnY popup-bg pad-30 color-text">
				<view class="font-30">评价服务</view>
				<view class="font-24 mar-top-23">您的好评是我们最大的动力</view>
				<image class="avatar mar-top-40" :src="rateInfo.service_order_workers.avatar" mode=""></image>
				<view class="mar-top-20 font-32">{{rateInfo.service_order_workers.name}}</view>
				<!-- <view class="font-30 mar-top-30 color-text ">活路</view> -->
				<!-- <view class="centerXY mar-top-30">
					<up-rate count="5" size="26" activeColor="#FFB300" inactiveColor="#CCCCCC"
						v-model="orderRate"></up-rate>
					<view class="font-32 mar-top-10">{{orderRate}}.0 分</view>
				</view> -->
				<!-- <view class="textarea mar-top-30">
					<up-textarea v-model="evaluateText" placeholder="请输入评价" count maxlength="100"></up-textarea>
				</view> -->
				<view @click="submitEvaluate" class="e-button">发布评价</view>
			</view>
		</up-popup>

		<suspend icon="/static/image/service.jpg"></suspend>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue';
	import { orderList, refundPreview, orderEvaluate } from '@/api/index.js';
	import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app';
	import { timeFormat, } from '@/node_modules/uview-plus';
	import util from '@/util/share.js'
	import { dataReportFun } from '@/util/dataReport.js'

	onLoad((option) => {
		dataReportFun({
			event: "client.page_view",
		})
	});

	// 倒计时结束触发
	const hanldeFinish = (item) => {
		item.pay_status = 5;
	}

	// 计算倒计时
	const hanldeTime = (endTime) => {
		return (endTime - parseInt(new Date().getTime() / 1000)) * 1000;
	}

	// 评论
	const isEvaluate = ref(false);
	const orderRate = ref(5);
	// const evaluateText = ref('');
	const rateInfo = ref({});
	const hanldeEvaluate = (item) => {
		rateInfo.value = item;
		isEvaluate.value = true;
	}

	// 提交评论
	const submitEvaluate = async () => {
		let res = await orderEvaluate({
			order_no: rateInfo.value.order_no,
			evaluate: [{
				service_order_detail_id: 24,
				score: orderRate.value
			}]
		})
	}

	// 支付回调
	const hanldePayCallback = (code) => {
		if (code == 200) {
			isPay.value = false;
			paging.value.reload();
		}
	}

	// 跳转订单动态
	const hanldeOrderTrends = (item) => {
		uni.navigateTo({
			url: '/pages/order/orderTrends/orderTrends?order_no=' + item.order_no
		})
	}

	// 创建响应式数据  
	const current = ref(0);
	const isShow = ref(false);
	const tabList = reactive([{
			name: '全部',
			status: ''
		},
		{
			name: '待支付',
			status: 1
		},
		{
			name: '已支付',
			status: 3
		},
		{
			name: '已退款',
			status: 6
		}
	]);

	// 使用 reactive 创建响应式对象
	const timeData = ref({});
	// 定义 onChange 方法
	const onChangeTime = (e) => {
		timeData.value = e;
	};

	// 切换订单状态
	const payStatus = ref('');
	const swiperChange = (e) => {
		current.value = e;
		paging.value.reload();
	}

	// 打开再次支付
	const isPay = ref(false);
	let orderNo = ref('');
	const hanldeOpenPay = (item) => {
		orderNo.value = [item.order_no];
		if (orderNo.value) {
			isPay.value = true;
		}
	}

	// 拨打电话
	const hanldeOpenTel = (user) => {
		uni.makePhoneCall({
			phoneNumber: user.tel, // 电话号码
			success: function() {
				console.log('Call successful');
			},
			fail: function(err) {
				console.error('Call failed: ', err);
			}
		});
	}

	// 跳转订单详情
	const hanldeInfo = (item) => {
		uni.navigateTo({
			url: '/pages/order/orderInfo/orderInfo?order_no=' + item.order_no
		})
	}

	const list = ref([]);
	const paging = ref(null);
	const getOrderList = (page, pageSize) => {
		orderList({
			page,
			ps: pageSize,
			pay_status: tabList[current.value].status
		}).then(res => {
			if (res?.code == 200) {
				paging.value.complete(res.data.data);
			} else {
				paging.value.complete(false);
			}
		})
	}

	onShow(() => {
		setTimeout(() => {
			if (paging.value) {
				paging.value.reload();
			}
		}, 0);
	});

	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/index/index`
		})
	})
</script>

<style scoped lang="scss">
	.btn {
		width: 150rpx;
		height: 54rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 54rpx;
		text-align: center;
	}

	.popup-bg {
		width: 670rpx;
		background: linear-gradient(180deg, #F1F5FC 0%, #FFFFFF 100%);
		border-radius: 30rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.e-button {
		width: 500rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient(270deg, #0055FE 0%, #5E94FF 100%);
		border-radius: 50rpx;
		text-align: center;
		color: white;
		font-size: 32rpx;
		margin-top: 80rpx;
	}

	.textarea {
		width: 100%;
	}

	:deep(.u-count-down) {
		color: red;
		font-size: 30rpx;
	}
</style>